<template>
	<div>
		<div>
			<!-- 搜索框 -->
			<van-search
				v-model="value"
				placeholder="搜索您想要的商品"
				input-align="center"
			/>
		</div>
		<div>
			<!-- 轮播图 -->
			<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
				<van-swipe-item>
					<img src="../assets/ban1.jpg" />
				</van-swipe-item>
				<van-swipe-item><img src="../assets/ban2.jpg" /></van-swipe-item>
				<van-swipe-item><img src="../assets/ban3.jpg" /></van-swipe-item>
				<van-swipe-item><img src="../assets/ban4.jpg" /></van-swipe-item>
			</van-swipe>
		</div>
		<div>
			<!-- 导航 -->
			<van-grid>
				<van-grid-item @click="add" icon="good-job-o" text="精选推荐" />
				<van-grid-item @click="add" icon="shop-collect-o" text="酒水专场" />
				<van-grid-item icon="description" text="订单管理" />
				<van-grid-item icon="wap-home-o" text="商家入驻" />
			</van-grid>
			<!-- 消息通知 -->
			<van-notice-bar left-icon="volume-o" :scrollable="false">
				<van-swipe
					vertical
					class="notice-swipe"
					:autoplay="3000"
					:show-indicators="false"
				>
					<van-swipe-item>热烈祝贺伟义商城成功上线</van-swipe-item>
					<van-swipe-item>热烈祝贺蓝之蓝股份成功上市</van-swipe-item>
					<van-swipe-item>热烈祝贺伟义商城成功上线</van-swipe-item>
					<van-swipe-item>热烈祝贺蓝之蓝股份成功上市</van-swipe-item>
					<van-swipe-item>热烈祝贺蓝之蓝股份成功上市</van-swipe-item>
					<van-swipe-item>热烈祝贺伟义商城成功上线</van-swipe-item>
					<van-swipe-item>热烈祝贺蓝之蓝股份成功上市</van-swipe-item>
				</van-swipe>
			</van-notice-bar>
		</div>
		<div>
			<!-- 精选推荐 -->
			<van-nav-bar
				left-text="精选推荐"
				right-text="3/6"
				left-arrow
				@click-left="onClickLeft"
				@click-right="onClickRight"
			/>
			<div class="image">
				<img @click="jump" src="../assets/jingxuan1.jpg" />
				<img @click="jump" src="../assets/jingxuan3.jpg" />
				<img @click="jump" src="../assets/jingxuan4.jpg" />
			</div>
		</div>
		<div>
			<!-- 酒水推荐 -->
			<van-nav-bar
				left-text="酒水推荐"
				right-text="3/6"
				left-arrow
				@click-left="onClickLeft"
				@click-right="onClickRight"
			/>
			<div class="image">
				<img @click="jump" src="../assets/jingxuan1.jpg" />
				<img @click="jump" src="../assets/jingxuan3.jpg" />
				<img @click="jump" src="../assets/jingxuan5.jpg" />
			</div>
			<div class="image">
				<img @click="jump" src="../assets/jingxuan1.jpg" />
				<img @click="jump" src="../assets/jingxuan5.jpg" />
				<img @click="jump" src="../assets/jingxuan4.jpg" />
			</div>
		</div>
		<!-- 猜你喜欢 -->
		<div class="link">
			<p>-猜你喜欢-</p>
			<div>
				<ul @click="jump" class="box">
					<li><img src="../assets/pro1.jpg" /></li>
					<li>
						<p>洋河蓝色瓶经典Q7浓香型白酒500ml52度高端纯粮食白酒2瓶装包邮</p>
					</li>
					<li><p>￥296.00</p></li>
				</ul>
				<ul @click="jump" class="box">
					<li><img src="../assets/pro2.jpg" /></li>
					<li>
						<p>洋河蓝色瓶经典Q7浓香型白酒500ml52度高端纯粮食白酒2瓶装包邮</p>
					</li>
					<li><p>￥296.00</p></li>
				</ul>
			</div>
			<div>
				<ul @click="jump" class="box">
					<li><img src="../assets/ban3.jpg" /></li>
					<li>
						<p>洋河蓝色瓶经典Q7浓香型白酒500ml52度高端纯粮食白酒2瓶装包邮</p>
					</li>
					<li><p>￥296.00</p></li>
				</ul>
				<ul @click="jump" class="box">
					<li><img src="../assets/ban4.jpg" /></li>
					<li>
						<p>洋河蓝色瓶经典Q7浓香型白酒500ml52度高端纯粮食白酒2瓶装包邮</p>
					</li>
					<li><p>￥296.00</p></li>
				</ul>
			</div>
			<div>
				<ul @click="jump" class="box">
					<li><img src="../assets/pro5.jpg" /></li>
					<li>
						<p>洋河蓝色瓶经典Q7浓香型白酒500ml52度高端纯粮食白酒2瓶装包邮</p>
					</li>
					<li><p>￥296.00</p></li>
				</ul>
				<ul @click="jump" class="box">
					<li><img src="../assets/pro1.jpg" /></li>
					<li>
						<p>洋河蓝色瓶经典Q7浓香型白酒500ml52度高端纯粮食白酒2瓶装包邮</p>
					</li>
					<li><p>￥296.00</p></li>
				</ul>
			</div>
		</div>
		<div @click="add" class="foot">查看更多>></div>
	</div>
</template>

<script>
export default {
	methods: {
		add() {
			this.$router.push('/a')
		},
		jump() {
			this.$router.push('/b')
		},
		onClickLeft() {
			Toast('返回')
		},
		onClickRight() {
			Toast('按钮')
		},
	},
	data() {
		return {
			value: '',
		}
	},
}
</script>
<style>
.my-swipe img {
	width: 100%;
}
.notice-swipe {
	height: 40px;
	line-height: 40px;
}
.image {
	width: 100%;
}

.image img {
	width: 33.3%;
	display: inline-flex;
}
.link {
	width: 100%;
}
.link p {
	text-align: center;
}
.link > div {
	width: 100%;
	display: inline-flex;
	margin-top: 2px;
	margin-right: 2px;
}
.box {
	width: 48%;
}
.box p {
	text-align: left;
}
.box img {
	width: 15rem;
	height: 15rem;
}
.foot {
	width: 100%;
	height: 100px;
	text-align: center;
}
</style>